<template>
    <div class="story">
        <div class="container">
            <div class="icon_group">
                <div class="icon_1">
                    <img src="../assets/img/hs01.png" alt="">
                    <span class="title">
                        榜单
                    </span>
                </div>
                <div class="icon_1">
                    <img src="../assets/img/hs02.png" alt="">
                    <span class="title">
                        分类
                    </span>
                </div>
                <div class="icon_1">
                    <img src="../assets/img/hs03.png" alt="">
                    <span class="title">
                        历史阅读
                    </span>
                </div>
            </div>
            <div class="nav">
                <span>大家都在看</span>
            </div>
            <div class="main">
                <ul>
                    <li v-for="(item,index) in arr">
                        <div class="book_title">
                            <span>{{ item.title }}</span>
                        </div>
                        <div class="name">
                            <span>{{ item.name }}</span>
                        </div>
                        <div class="text">
                            <span>{{ item.text }}</span>
                        </div>
                        <div class="aside">
                            <span>{{ item.aside }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div style="width: 100%; height: 70px;"></div>
    </div>
</template>

<style lang="less" scoped>
.story{
    width: 100%;
    background-color: #fbfbfd;
    .container{
        width: 94%;
        margin: 0 auto;
    }
    .icon_group{
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .icon_1{
            width: 32%;
            border: 0.5px solid #efeff1;
            height: 70px;
            box-shadow: 0px 0px 1px 1px #efeff1;
            position: relative;
            text-align: center;
            img{
                width: 30%;
                position: absolute;
                top: 10px;
                left: 35%;
            }
            span{
                position: absolute;
                display: block;
                text-align: center;
                width: 60%;
                left: 20%;
                top: 45px;
                font-size: 16px;
                color: #58575c;
            }
        }
    }
    .nav{
        margin-top: 20px;
        width: 100%;
        height: 30px;
        span{
            margin-left: 0;
            margin-top: 10px;
            font-size: 18px;
        }
    }
    .main{
        width: 100%;
        margin-top: 10px;
        ul{
            width: 100%;
            li{
                overflow: hidden;
                width: 100%;
                box-shadow: 0px 0px 1px 1px #efeff1;
                margin-top: 10px;
                .book_title{
                    margin-top: 20px;
                    margin-left: 10px;
                    font-size: 20px;
                }
                .name{
                    margin-top: 10px;
                    margin-left: 10px;
                    font-size: 16px;
                    margin-left: 10px;
                    color: #232323;
                }
                .text{
                    margin-top: 10px;
                    font-size: 16px;
                    margin-left: 10px;
                    color: #555555;
                }
                .aside{
                    font-size: 14px;
                    color: #bebec0;
                    margin-top: 10px;
                    margin-left: 10px;
                    margin-bottom: 20px;
                }
            }
        }
    }
}
</style>

<script>
export default {
    data(){
        return{
            arr:[
                {
                    title:"有什么沙雕轻松的甜文推荐吗？",
                    name:"《成为动物饲养员后》",
                    text:"我退圈以后，在一家动物园当上了饲养员。从那天起，我忽然有了一项特异功能--能听到动物说话。比如园中的...",
                    aside:"4.6 万赞同·言情·脑洞",
                },
                {
                    title:"八国联军时，如果把清朝换成唐朝，结果会有怎样的不同?",
                    name:"《挽天倾|当李世民朱元璋双穿...》",
                    text:"当日军炮声响彻黄海，旅顺要塞危如累卵，慈禧还在颐和园准备她的六十岁..",
                    aside:"2043赞同·权谋·脑洞",
                },
                {
                    title:"有没有高质量的规则类怪谈?",
                    name:"《幸福小区怪谈》",
                    text:"我们整个小区都阳了之后，物业在小区群里发了一个居家安全守则:【十点后，不管你听到什么奇怪的声音，都..",
                    aside:"1万赞同·悬疑·脑洞",
                },
                {
                    title:"有什么打脸绿茶的爽文?",
                    name:"《我全家都重生了》",
                    text:"我全家都重生了。上一世，我爸、我妈，我哥、我弟都护着假千金。他们都重生后--假千金找我爸要大房子，我.",
                    aside:"1.8 万赞同·现实情感·脑洞",
                },
                {
                    title:"当后宫争宠时，皇帝在想什么?",
                    name:"《侍寝时，我突然听见皇帝心声》",
                    text:"我是个常在。侍寝时，我突然能听见皇帝的心声。【好累、好疲惫，不想翻牌子了。【天杀的刘大人还让朕..",
                    aside:"3.8 万赞同·言情·穿越",
                },
                {
                    title:"请问有哪些好看的规则类怪谈?",
                    name:"《恐怖校园群》",
                    text:"晚上八点，全校所有人突然被拉进一个微信群。我一看群人数:14368人!微信群名是:幸存者。群里一下炸锅…",
                    aside:"1.3 万赞同·悬疑·惊悚",
                },
                {
                    title:"你看过最爽的爽文是哪个?",
                    name:"《恐怖游戏治好了我的抑郁症》",
                    text:"恐怖游戏降临。进入游戏前的我:爹不疼娘不爱，天天萝卜拌白菜，有事没事挨顿踹，中度抑郁还得早起给家人.",
                    aside:"4.6 万赞同·悬疑·惊悚",
                },
            ],
        }
    },
    methods:{
        
    },
}
</script>